<template>
    <banner2 style="margin-top: -10px"></banner2>
    <div class="type">
        <div v-for="item1 in List" :key="item1.id" class="item" >
            <div class="title">
                <div class="title_content">{{item1.categoryName}}</div>
                <div class="pre_and_next">
                    <div><i class="iconfont icon-left"></i></div>
                    <div><i class="iconfont icon-right"></i></div>
                </div>
            </div>
            <div class="bottom_line"></div>

            <item2 v-for="item2 in item1.itemList" :data="item2" :key="item2.id" @click.stop="toDetail(item2)" class="toDatail">

            </item2>
        </div>
    </div>
</template>

<script>
    import banner2 from "../common/banner2";
    import item2 from "./item2";
    import {NewsCategoryList,NewsList} from "@/api/new"

    export default {
        name: "index2",
        components: {
            banner2,
            item2,
        },
        data() {
            return {
                List:[],
            }
        },
        created() {
            this.getType()
        },
        methods:{

            getType(){

                NewsCategoryList().then(res=>{

                    this.List = res.data.list
                    console.log("aaaaaaaaaaaaa",this.List)
                    res.data.list.forEach((item,index)=>{

                        this.getList(item.id)

                    })
                    console.log("xxxxxxxxx",this.List)
                })

            },

            getList(id){

                NewsList({newscategoryid: id}).then(res=>{
                    console.log('bbbbbbbbbbb',res)
                    this.List.forEach(item=>{
                        if(item.id == id){
                            item.itemList = res.data.list
                        }
                    })
                })

            },

            toDetail(item){
                this.$router.push({path:'/industryDetail',query:{id:item.id}})
            },

        }
    }
</script>

<style scoped lang="scss">
    .type{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 20px;
    }
    .item{
        width: 49%;
        margin-top: 15px;
    }
    .item:nth-child(2n){
        margin-right: 0px;
    }
    .title{
        display: flex;
        justify-content: space-between;
        height: 40px;
        align-items: center;
        .title_content{
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #111111;
            //width: 68px;
            text-align: center;
            height: 40px;
            line-height: 40px;
            border-bottom: 3px solid #2EB0C6;;

        }
        .pre_and_next{
            display: flex;
            margin-right: 2px;
            div{
                cursor: pointer;

                width: 18px;
                height: 18px;
                background: #E5E5E5;
                border-radius: 2px 2px 2px 2px;
                text-align: center;
                line-height: 18px;

            }
            div:nth-child(1){
                margin-right: 7px;
            }
        }
    }
    .bottom_line{
        width: 100%;
        height: 1px;
        background: #CCCCCC;
        margin-top: 2px;
    }
    .toDatail{
        cursor: pointer;
    }

</style>
